iT邦幫忙

2021 iThome 鐵人賽
DAY 13
0
Modern Web

33歲轉職者的前端筆記系列 第 13 篇

33歲轉職者的前端筆記-DAY 13 圖片格式及影音格式

13th鐵人賽 菜鳥前端 圖片格式 影音格式
709 瀏覽

  • 分享至 

  • xImage
    •  

圖片

網頁上一定會有多許多圖片元素我們在開發網站時需多了解圖片的特性及格式，在開發的過程會更加順利。

圖片標籤

  • img 為在 HTML 中 插入圖片的標籤語法
  • 寫法為：<img src="圖片路徑" alt="圖片名稱">
  • src 分為相對路徑與絕對路徑
  • 絕對路徑：直接從網頁圖片複製圖片網址
  • 相對路徑：把圖片把存到圖片資料夾在抓取路徑

圖片格式

以下常見的圖片格式有：

  • jpg：解析度最小
  • jpeg
  • gif
  • png：png8 png32 解析度最大
  • apng
  • spng
  • svg：近幾年較盛行, 不會被壓縮失真
  • webp：近兩三年盛起google 推出來的，任何圖片格式都可以轉webp

https://ithelp.ithome.com.tw/upload/images/20210913/20120789pBDcL8x2BW.jpg

影音標籤格式

常見的影音格式如下：

  • video
  • audio
  • source
  • 格式：mp4 webm

https://ithelp.ithome.com.tw/upload/images/20210913/20120789vAR5xOwMb7.jpg


上一篇
33歲轉職者的前端筆記-DAY 12 一些網頁切版技巧的小筆記-Part 3
下一篇
33歲轉職者的前端筆記-DAY 14 排版技巧小筆記-標籤屬性元素及定位方法
系列文
33歲轉職者的前端筆記 共 30 篇
  1. 26
    [鼠年全馬鐵人挑戰] Week26 - jQuery 事件處理
  2. 27
    33歲轉職者的前端筆記 DAY 27 CSS 三角形、三角形折角、轉 45 度漸層色
  3. 28
    33歲轉職者的前端筆記 DAY 28 CSS 選取器類別筆記
  4. 29
    33歲轉職者的前端筆記-DAY 29 前端面試題目練習
  5. 30
    33歲轉職者的前端筆記-DAY 30 終點也是起點
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙